<template>


  <div>
    <breadcrumb-box btn-path="/apipurview" :info-name="pageInfo.name" service-path="API列表"
                    model-name="API详情"></breadcrumb-box>

    <el-card>
      <el-form ref="form" :model="typeDateInfo" label-width="80px">
        <el-row :gutter="20">
          <!--类型名称-->
          <el-col :span="8">
            <div class="edit_title">接口地址:</div>
            <div class="edit_input">
              <el-input :disabled="type" v-model="typeDateInfo.purviewUrl" size="mini"
                        placeholder="请输入接口名称"></el-input>

            </div>

          </el-col>
          <el-col :span="8">
            <div class="edit_title">接口名称:</div>
            <div class="edit_input">
              <el-input :disabled="type" v-model="typeDateInfo.purviewName" size="mini"
                        placeholder="请输入接口名称"></el-input>

            </div>

          </el-col>
          <el-col :span="8">
            <div class="edit_title">请求方式:</div>
            <div class="edit_input">
              <el-input :disabled="type" v-model="typeDateInfo.method" size="mini"
                        placeholder="请输入接口名称"></el-input>

            </div>

          </el-col>
          <el-col :span="8">
            <div class="edit_title">所属角色:</div>
            <div class="edit_input">
              <el-input :disabled="type" v-model="typeDateInfo.roleNames" size="mini"
                        placeholder="请输入接口名称"></el-input>

            </div>

          </el-col>
          <el-col :span="24">
            <div class="button-pattern">
              <div style="text-align: center">
                <edit-box btn-icon="el-icon-back" btn-type="backTo" css-type=""
                          @click.native='$router.push({ path : "apipurview" } );pageInfo={}'></edit-box>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>

</template>

<script>
import {mapState} from 'vuex'
import editBox from '../component/editBox'
import breadcrumbBox from '../component/breadcrumbBox'
import {queryMapList} from '@/api/MallSysPurviewApi.js'

export default {
  name: "TypeAddEdit",
  data() {
    return {
      typeDateInfo: {},
      type: false,
      pageInfo: {
        name: "添加",
        type: false
      },
    }
  },
  methods: {
    getStorefrontInfoSelectList(id) {
      queryMapList({
        queryBean: {id: id},
        page: {current: 1, size: 1}
      }).then(res => {
        let records = res.data.list.records;
        if (records && records.length > 0) {
          this.typeDateInfo = res.data.list.records[0]
        }

      })
    }
  },
  mounted() {
    this.getStorefrontInfoSelectList(this.$route.query.id)
    this.pageInfo.name = this.$route.query.name
    if (this.pageInfo.name === this.$t('common.view')) {
      this.type = true
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  components: {
    editBox, breadcrumbBox
  }
}
</script>

<style lang="less" scoped>

.button-pattern {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
}

.edit_title {
  padding: 10px;
  font-size: 10px;
  color: #894e54;
}

.edit_input {
  padding: 10px;
}
</style>
